<template>
    <div>
        <el-dialog title="用户页面" fullscreen style="background: #F0F0F0;" :close-on-click-modal="false" :close-on-press-escape="false"  :visible.sync="value" :show-close="false" :center="true">

            <el-form ref="form" :model="user" fullscreen inline :rules="rules" label-position="right" label-width="120px" size="mini">


                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="nickName" label="用户姓名">
                            <el-input type="text" v-model="user.nickName" placeholder="请输入用户姓名" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="departmentId" label="选择部门">
                            <el-select v-model="user.departmentId" clearable filterable placeholder="请选择部门" style="width: 220px;">
                                <el-option :key="item.id" :value="item.id" :label="item.name" v-for="item in computed_departmentData"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="telephone" label="电话号码">
                            <el-input type="text" v-model="user.telephone" placeholder="请输入电话号码" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="email" label="用户邮箱">
                            <el-input type="text" v-model="user.email" placeholder="请输入E-mail" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="sex" label="用户性别">
                            <el-radio-group v-model="user.sex">
                                <el-radio :label="'1'">男</el-radio>
                                <el-radio :label="'2'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="type" label="用户类型">
                            <el-radio-group v-model="user.type">
                                <el-radio :label="'1'">教师</el-radio>
                                <el-radio :label="'2'" disabled>学生</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="residenceAddress" label="省、市、区">
                            <el-cascader :options="options" v-model="selectedOptions" style="margin-right: 10px;width: 220px;">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="birthday" label="用户生日">
                            <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期" size="mini"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="township" label="乡镇信息" style="display: inline-block;">
                            <el-input type="text" v-model="user.township" placeholder="镇/乡" style="width: 220px;margin-right: 10px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="graduationSchool" label="毕业院校">
                            <el-input type="text" v-model="user.graduationSchool" placeholder="请输入毕业院校" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="detailed" label="村、街道" style="display: inline-block;">
                            <el-input type="text" v-model="user.detailed" placeholder="村" style="width: 220px;margin-right: 10px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="idCard" label="身份证号">
                            <el-input type="text" v-model="user.idCard" placeholder="请输入身份证号" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="major" label="用户专业">
                            <el-radio-group v-model="user.major">
                                <el-radio :label="'1'">计算机专业</el-radio>
                                <el-radio :label="'2'">其他专业</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="emergencyContact" label="紧急联系">
                            <el-input type="text" v-model="user.emergencyContact" placeholder="请输入紧急联系人" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="jobTitle" label="职位名称">
                            <el-select v-model="user.jobTitle" clearable filterable placeholder="请选择职位" style="width: 220px;">
                                <el-option :key="item.id" :value="item.name" :label="item.name" v-for="item in jobData"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="relation" label="姓名电话">
                            <el-input type="text" v-model="user.relation" placeholder="请输入紧急联系人姓名和电话" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="entryTime" label="入职日期">
                            <el-date-picker v-model="user.entryTime" type="date" placeholder="选择日期" size="mini"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="hasMember" label="是否转正">
                            <el-radio-group v-model="user.hasMember">
                                <el-radio :label="'1'">转正</el-radio>
                                <el-radio :label="'2'">不转正</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="jobNumber" label="用户工龄">
                            <el-input-number v-model="user.jobNumber" :min="1" :max="30" label="请输入工龄" style="width: 220px;"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="laborContract" label="劳动合同">
                            <el-radio-group v-model="user.laborContract">
                                <el-radio :label="'1'">已办理</el-radio>
                                <el-radio :label="'2'">未办理</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="contractTime" label="签订日期">
                            <el-date-picker v-model="user.contractTime" type="date" placeholder="选择日期" size="mini"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="contractNumber" label="续签天数">
                            <el-input-number v-model="user.contractNumber" :min="1" :max="1000" label="按天统计" style="width: 220px;"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="hasSocialSecurity" label="是否社保">
                            <el-radio-group v-model="user.hasSocialSecurity">
                                <el-radio :label="'1'">有</el-radio>
                                <el-radio :label="'2'">无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="hasLeave" label="是否离职">
                            <el-radio-group v-model="user.hasLeave">
                                <el-radio :label="'1'">未离职</el-radio>
                                <el-radio :label="'2'">已离职</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item prop="education" label="用户学历">
                            <el-select v-model="user.education" clearable filterable placeholder="请选择学历" style="width: 220px;">
                                <el-option value="1" label="初中"></el-option>
                                <el-option value="2" label="高中"></el-option>
                                <el-option value="3" label="中专"></el-option>
                                <el-option value="4" label="大专"></el-option>
                                <el-option value="5" label="本科"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item prop="roleIds" label="分配角色">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :key="item.id" :label="item.id" v-for="item in roleData">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template slot="footer">
                <el-button type="info" @click="value = false" ><span class="el-icon-bell"></span>取消</el-button>
                <el-button type="success" v-loading.fullscreen.lock="fullscreenLoading" @click="handleSubmit" icon="el-icon-plus">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import { saveOrUpdate } from '@/api/access/user.js'

    import { findAll } from '@/api/access/department.js'

    import { getRoles } from '@/api/access/role.js'

    import { getDictionariesList } from '@/api/system/dictionaries.js'

    import { regionData,CodeToText,TextToCode } from 'element-china-area-data'

    export default {
        name:'user-child',
        data(){
            return {
                fullscreenLoading:false,
                value : false,
                user:{},
                departmentData:[],
                roleData:[],
                jobData:[],
                checkList:[],
                options: regionData,
                selectedOptions: []
            }
        },
        props:{
            detailedRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            townshipRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            nickNameRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            departmentIdRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            telephoneRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            emailRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            sexRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            typeRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            idCardRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            birthdayRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            graduationSchoolRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            majorRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            emergencyContactRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            relationRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            jobTitleRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            entryTimeRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            hasMemberRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            jobNumberRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            laborContractRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            contractTimeRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            contractNumberRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填项',trigger:'blur'}
                    ]
                }
            },
            hasSocialSecurityRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            hasLeaveRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            },
            educationRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必选项',trigger:'change'}
                    ]
                }
            }
        },
        computed:{
            rules(){
                return {
                    detailed:this.detailedRule,
                    township:this.townshipRule,
                    nickName:this.nickNameRule,
                    departmentId:this.departmentIdRule,
                    telephone: this.telephoneRule,
                    email: this.emailRule,
                    sex: this.sexRule,
                    type: this.typeRule,
                    idCard: this.idCardRule,
                    birthday:this.birthdayRule,
                    graduationSchool:this.graduationSchoolRule,
                    major:this.majorRule,
                    emergencyContact:this.emergencyContactRule,
                    relation:this.relationRule,
                    jobTitle:this.jobTitleRule,
                    entryTime:this.entryTimeRule,
                    hasMember:this.hasMemberRule,
                    jobNumber:this.jobNumberRule,
                    laborContract:this.laborContractRule,
                    contractTime:this.contractTimeRule,
                    contractNumber:this.contractNumberRule,
                    hasSocialSecurity:this.hasSocialSecurityRule,
                    hasLeave:this.hasLeaveRule,
                    education:this.educationRule
                }
            },
            computed_departmentData() {
                let arr = [];
                this.departmentData.forEach(department=>{
                    if(department.children.length != 0){
                        department.children.forEach(depart=>{
                            if(depart.pid != '0'){
                                arr.push(depart);
                            }
                        });
                    }
                });
                return arr;
            }
        },
        watch:{
            value(data){
                if(data){

                    this.checkList = [];

                    this.selectedOptions = [];

                    findAll().then(res=>{
                        this.departmentData = res.data.data;
                    });
                    getRoles().then(res=>{
                        this.roleData = res.data.data;
                    });

                    getDictionariesList({code:'JOB-TITLE'}).then(res=>{
                        this.jobData = res.data.data.rows;
                    });
                }
            },
            'user.id'(data){
                if(data){

                    //处理角色多选框的数据回显
                    this.checkList = [];


                    if(this.user.roleIds){
                        this.checkList = this.user.roleIds.split(",");
                    }


                    //省市区回显
                    //console.log(TextToCode['北京市'].code);
                    //console.log(CodeToText[110000]);

                    //console.log(this.user)
                    //console.log(TextToCode);

                    //console.log(TextToCode[this.user.province].code)
                    //console.log(TextToCode[this.user.province][this.user.city].code)
                    //console.log(TextToCode[this.user.province][this.user.city][this.user.area].code)

                    this.selectedOptions.push(TextToCode[this.user.province].code);
                    this.selectedOptions.push(TextToCode[this.user.province][this.user.city].code);
                    this.selectedOptions.push(TextToCode[this.user.province][this.user.city][this.user.area].code);
                }
            }
        },
        methods:{

            handleSubmit(){

                if(this.checkList.length == 0){
                    this.$message.error("请为用户分配角色");
                    return false;
                }

                if(this.selectedOptions.length == 0){
                    this.$message.error("请选择省市区");
                    return false;
                }

                this.$refs['form'].validate(valid=>{
                    if(valid){

                        //console.log(TextToCode['北京市'].code);
                        //console.log(CodeToText[110000]);

                        let arr = [];

                        this.selectedOptions.forEach(ele=>{
                            arr.push(CodeToText[ele]);
                        });

                        //给省市区赋值
                        this.user.province = arr[0];
                        this.user.city = arr[1];
                        this.user.area = arr[2];


                        this.user.roleIds = this.checkList.join(",");

                        this.user.roles = null;

                        this.fullscreenLoading = true;
                        saveOrUpdate(this.user).then(res=>{
                            this.$message({
                                type:res.data.success?'success':'error',
                                message:res.data.message
                            });
                            this.fullscreenLoading = false;
                            this.value = false;
                            this.$parent.getUserList({departmentIds:""});
                        });
                    }else{
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
</style>
